<template>
	<div>
		<h1>订场页面</h1>
		<span v-if="currentCity.name">{{currentCity.name}}</span>
		<input type="text" v-model="search.keyword"> <button type="button" @click="getStadiums()">搜索</button>
		<div v-if="currentCity.districtVO">
			<h3>类别：</h3>
			<span 
			:class="{'active':search.sportTypeCode==''}"
			@click="search.sportTypeCode=''; getStadiums()"
			>全部</span>
			<span 
			v-for="types in sportTypes" 
			:key="types.code" 
			:class="{'active':search.sportTypeCode==types.code}"
			@click="search.sportTypeCode=types.code; getStadiums()"
			>
				{{types.codeName}}
			</span>
		</div>
		<div>
			<h3>区域：</h3>
			<span 
			:class="{'active':search.district==''}" 
			@click="search.district='';getStadiums()"
			>全部</span>
			<span 
			v-for="area in currentCity.districtVO" 
			:key="area.code"
			 :class="{'active':search.district==area.code}"
			 @click="search.district=area.code;getStadiums()"
			>
				{{area.name}}
			</span>
		</div>
		<!-- 场馆列表 -->
		<div class="list" v-if="stadiums.length">
			<h3>场馆列表：</h3>
			<!-- 便利场馆 -->
			<div class="stadium" v-for="stadium in stadiums"
			 @click="$router.push('/statium'+stadium.stadiumItemId)"
			 :key="stadium.stadiumItemId">
				<img :src="stadium.imageList[0]&&stadium.imageList[0].imageUrl" width="300" >
				<p>{{stadium.stadiumItemName}}</p>
			</div>
		</div>
		<div v-else>
			<h4>哇，没有找到相关场馆</h4>
		</div>
		
	</div>
</template>

<script>
	export default{
		data(){
			return {
				citys:[],
				currentCity:{},
				sportTypes:[],
				search:{
					"channel":"1",   		// 频道 固定
					"city":"310100", 		// 城市
					"district":"", 	// 区域
					"keyword":"", 		// 搜索关键字
					"pageNo":"1", 			// 页数
					"pageSize":"10", 		// 每页多少条数据
					"sportTypeCode":""   // 运动类型
				},
				stadiums:[],	//场馆列表
			}
		},
		created() {
			// 获取城市
			this.getCity();
			// 获取区域
			this.getSportTypes()
			// 获取场馆
			this.getStadiums();
		},
		methods:{
			// 获取城市
			getCity(){
				this.$http.get("https://tenant.51yundong.me/v3/stadium/tenants/stadiums/city")
				.then(res=>{
					// 获取全部城市
					this.citys = res.data.data;
					// 获取当前城市
					this.currentCity = this.citys[1];
				})
			},
			getSportTypes(){
				this.$http.get("https://dd.51yundong.me/v3/sportTypes")
				.then(res=>{
					this.sportTypes = res.data.data.dataList;
				})
			},
			// 根据搜索条件，获取场馆
			getStadiums(){
				var obj = {};
				// 从this.search 拷贝出obj（只拷贝非空元素）
				for(var k in this.search){
					if(this.search[k]!=''){
						//如果不为空，才会拷贝
						obj[k] = this.search[k];
					}
				}
				this.$http.get("https://tenant.51yundong.me/v3/stadium/api/stadiums/stadiumItems",{
					params:obj,
				})
				.then(res=>{
					// console.log(res.data,"获取场馆")
					this.stadiums = res.data.data.dataList;
				})
			}
		}
	}
 
</script>

<style>
	.active{
		color:#fff;
		background-color: #f90;
	}
</style>
